<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.1.3 (458534)"/><meta name="author" content="流星"/><meta name="created" content="2020-10-26 11:25:58 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-26 11:40:10 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>编程风格</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">块级作用域</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">(1)let 取代 var<br/>
var 命令存在变量提升效用， let 命令没有这个问题。<br/>
所以，建议不再使用 var 命令，而是使用 let 命令取代。<br/>
(2)全局常量和线程安全<br/>
在 let 和 const 之间，建议优先使用 const ，尤其是在全局环境， 不应该设置变量，只应设置常量。<br/>
JavaScript 编译器会对 const 进行优化，所以多使 用 const ，有利于提供程序的运行效率，也就是说 let 和 const 的 本质区别，其实是编译器内部的处理不同。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> a = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, b = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, c = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> c = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// best</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> [a, b, c] = [<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>];
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">字符串</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用<br/>
反引号。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">解构赋值</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用数组成员对变量赋值时，优先使用解构赋值。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> arr = [<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>];
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> first = arr[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>];
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> second = arr[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>];
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> [first, second] = arr;
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">函数的参数如果是对象的成员，优先使用解构赋值。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">getFullName</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">user</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> firstName = user.firstName;
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> lastName = user.lastName;
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">getFullName</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">obj</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> { firstName, lastName } = obj;
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// best</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">getFullName</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">{ firstName, lastName }</span>) </span>{
}
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋<br/>
值。这样便于以后添加返回值，以及更改返回值的顺序。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">processInput</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">input</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> [left, right, top, bottom];
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">processInput</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">input</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> { left, right, top, bottom };
}
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> { left, right } = processInput(input);
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">对象</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后<br/>
一个成员以逗号结尾。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = { <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k1</span>: v1, <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k2</span>: v2, };
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = {
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k1</span>: v1,
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k2</span>: v2 };
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = { <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k1</span>: v1, <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k2</span>: v2 };
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = {
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k1</span>: v1,
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">k2</span>: v2, };
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书<br/>
写。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> ref = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'some value'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> atom = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">ref</span>: ref,
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">addValue</span>: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">value</span>) </span>{
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> atom.value + value;
}, };
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> atom = {
  ref,
<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>,
  addValue(value) {
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> atom.value + value;
}, };
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">数组</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用扩展运算符(...)拷贝数组。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> len = items.length;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> itemsCopy = [];
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> i;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (i = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>; i &lt; len; i++) {
  itemsCopy[i] = items[i];
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> itemsCopy = [...items];
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用Array.from方法，将类似数组的对象转为数组。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">document</span>.querySelectorAll(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'.foo'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> nodes = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Array</span>.from(foo);
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">函数</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较<br/>
为复杂，行数较多，还是应该采用传统的函数写法。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">不要在函数体内使用arguments变量，使用rest运算符(...)代替。因为 rest运算符显式表明你想要获取参数，而且arguments是一个类似数组的对 象，而rest运算符可以提供一个真正的数组。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">concatenateAll</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> args = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Array</span>.prototype.slice.call(<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">arguments</span>);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> args.join(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">''</span>);
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">concatenateAll</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">...args</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> args.join(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">''</span>);
}
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用默认值语法设置函数参数的默认值。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">handleThings</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">opts</span>) </span>{
  opts = opts || {};
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">handleThings</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">opts = {}</span>) </span>{
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
}
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">Map结构</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意区分Object和Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要 key: value 的数据结构，使用Map结构。因为 Map有内建的遍历机制。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">Class</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">总是用Class，取代需要prototype的操作。<br/>
使用 extends 实现继承，因为这样更简单，不会有破 坏 instanceof 运算的危险。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">模块</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 import 取代 require 。<br/>
使用 export 取代 module.exports 。<br/>
如果模块只有一个输出值，就使用 export default ，如果模块有多个 输出值，就不使用 export default ， export default 与普通<br/>
的 export 不要同时使用。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一 个默认输出(export default)。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// bad</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> * <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> myObject <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./importModule'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// good</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> myObject <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./importModule'</span>;
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果模块默认输出一个函数，函数名的首字母应该小写。<br/>
如果模块默认输出一个对象，对象名的首字母应该大写。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">ESLint的使用</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">首先，安装 ESLint</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">$ npm i -g eslint
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">$ npm i -g eslint-config-airbnb
$ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y
eslint-plugin-react
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">最后，在项目的根目录下新建一个 .eslintrc 文件，配置ESLint</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  "extends": "eslint-config-airbnb"
}
</code></pre>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%23%23%23%20%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F%0A(1)let%20%E5%8F%96%E4%BB%A3%20var%0Avar%20%E5%91%BD%E4%BB%A4%E5%AD%98%E5%9C%A8%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87%E6%95%88%E7%94%A8%EF%BC%8C%20let%20%E5%91%BD%E4%BB%A4%E6%B2%A1%E6%9C%89%E8%BF%99%E4%B8%AA%E9%97%AE%E9%A2%98%E3%80%82%0A%E6%89%80%E4%BB%A5%EF%BC%8C%E5%BB%BA%E8%AE%AE%E4%B8%8D%E5%86%8D%E4%BD%BF%E7%94%A8%20var%20%E5%91%BD%E4%BB%A4%EF%BC%8C%E8%80%8C%E6%98%AF%E4%BD%BF%E7%94%A8%20let%20%E5%91%BD%E4%BB%A4%E5%8F%96%E4%BB%A3%E3%80%82%0A(2)%E5%85%A8%E5%B1%80%E5%B8%B8%E9%87%8F%E5%92%8C%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8%0A%E5%9C%A8%20let%20%E5%92%8C%20const%20%E4%B9%8B%E9%97%B4%EF%BC%8C%E5%BB%BA%E8%AE%AE%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8%20const%20%EF%BC%8C%E5%B0%A4%E5%85%B6%E6%98%AF%E5%9C%A8%E5%85%A8%E5%B1%80%E7%8E%AF%E5%A2%83%EF%BC%8C%20%E4%B8%8D%E5%BA%94%E8%AF%A5%E8%AE%BE%E7%BD%AE%E5%8F%98%E9%87%8F%EF%BC%8C%E5%8F%AA%E5%BA%94%E8%AE%BE%E7%BD%AE%E5%B8%B8%E9%87%8F%E3%80%82%0A%20JavaScript%20%E7%BC%96%E8%AF%91%E5%99%A8%E4%BC%9A%E5%AF%B9%20const%20%E8%BF%9B%E8%A1%8C%E4%BC%98%E5%8C%96%EF%BC%8C%E6%89%80%E4%BB%A5%E5%A4%9A%E4%BD%BF%20%E7%94%A8%20const%20%EF%BC%8C%E6%9C%89%E5%88%A9%E4%BA%8E%E6%8F%90%E4%BE%9B%E7%A8%8B%E5%BA%8F%E7%9A%84%E8%BF%90%E8%A1%8C%E6%95%88%E7%8E%87%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%20let%20%E5%92%8C%20const%20%E7%9A%84%20%E6%9C%AC%E8%B4%A8%E5%8C%BA%E5%88%AB%EF%BC%8C%E5%85%B6%E5%AE%9E%E6%98%AF%E7%BC%96%E8%AF%91%E5%99%A8%E5%86%85%E9%83%A8%E7%9A%84%E5%A4%84%E7%90%86%E4%B8%8D%E5%90%8C%E3%80%82%0A%20%0A%60%60%60js%0A%2F%2F%20bad%0Avar%20a%20%3D%201%2C%20b%20%3D%202%2C%20c%20%3D%203%3B%0A%2F%2F%20good%0Aconst%20a%20%3D%201%3B%0Aconst%20b%20%3D%202%3B%0Aconst%20c%20%3D%203%3B%0A%2F%2F%20best%0Aconst%20%5Ba%2C%20b%2C%20c%5D%20%3D%20%5B1%2C%202%2C%203%5D%3B%0A%60%60%60%0A%0A%23%23%23%23%20%E5%AD%97%E7%AC%A6%E4%B8%B2%0A%E9%9D%99%E6%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%80%E5%BE%8B%E4%BD%BF%E7%94%A8%E5%8D%95%E5%BC%95%E5%8F%B7%E6%88%96%E5%8F%8D%E5%BC%95%E5%8F%B7%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8%E5%8F%8C%E5%BC%95%E5%8F%B7%E3%80%82%E5%8A%A8%E6%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%BD%BF%E7%94%A8%0A%E5%8F%8D%E5%BC%95%E5%8F%B7%E3%80%82%0A%0A%23%23%23%23%20%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%0A%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E6%88%90%E5%91%98%E5%AF%B9%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E6%97%B6%EF%BC%8C%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E3%80%82%0A%60%60%60js%0Aconst%20arr%20%3D%20%5B1%2C%202%2C%203%2C%204%5D%3B%0A%2F%2F%20bad%0Aconst%20first%20%3D%20arr%5B0%5D%3B%0Aconst%20second%20%3D%20arr%5B1%5D%3B%0A%2F%2F%20good%0Aconst%20%5Bfirst%2C%20second%5D%20%3D%20arr%3B%0A%60%60%60%0A%0A%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E5%A6%82%E6%9E%9C%E6%98%AF%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%88%90%E5%91%98%EF%BC%8C%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Afunction%20getFullName(user)%20%7B%0A%20%20const%20firstName%20%3D%20user.firstName%3B%0A%20%20const%20lastName%20%3D%20user.lastName%3B%0A%7D%0A%2F%2F%20good%0Afunction%20getFullName(obj)%20%7B%0A%20%20const%20%7B%20firstName%2C%20lastName%20%7D%20%3D%20obj%3B%0A%7D%0A%2F%2F%20best%0Afunction%20getFullName(%7B%20firstName%2C%20lastName%20%7D)%20%7B%0A%7D%0A%60%60%60%0A%0A%E5%A6%82%E6%9E%9C%E5%87%BD%E6%95%B0%E8%BF%94%E5%9B%9E%E5%A4%9A%E4%B8%AA%E5%80%BC%EF%BC%8C%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E6%95%B0%E7%BB%84%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%0A%E5%80%BC%E3%80%82%E8%BF%99%E6%A0%B7%E4%BE%BF%E4%BA%8E%E4%BB%A5%E5%90%8E%E6%B7%BB%E5%8A%A0%E8%BF%94%E5%9B%9E%E5%80%BC%EF%BC%8C%E4%BB%A5%E5%8F%8A%E6%9B%B4%E6%94%B9%E8%BF%94%E5%9B%9E%E5%80%BC%E7%9A%84%E9%A1%BA%E5%BA%8F%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Afunction%20processInput(input)%20%7B%0A%20%20return%20%5Bleft%2C%20right%2C%20top%2C%20bottom%5D%3B%0A%7D%0A%2F%2F%20good%0Afunction%20processInput(input)%20%7B%0A%20%20return%20%7B%20left%2C%20right%2C%20top%2C%20bottom%20%7D%3B%0A%7D%0Aconst%20%7B%20left%2C%20right%20%7D%20%3D%20processInput(input)%3B%0A%60%60%60%0A%0A%23%23%23%23%20%E5%AF%B9%E8%B1%A1%0A%E5%8D%95%E8%A1%8C%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%8C%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E6%88%90%E5%91%98%E4%B8%8D%E4%BB%A5%E9%80%97%E5%8F%B7%E7%BB%93%E5%B0%BE%E3%80%82%E5%A4%9A%E8%A1%8C%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%8C%E6%9C%80%E5%90%8E%0A%E4%B8%80%E4%B8%AA%E6%88%90%E5%91%98%E4%BB%A5%E9%80%97%E5%8F%B7%E7%BB%93%E5%B0%BE%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Aconst%20a%20%3D%20%7B%20k1%3A%20v1%2C%20k2%3A%20v2%2C%20%7D%3B%0Aconst%20b%20%3D%20%7B%0Ak1%3A%20v1%2C%0Ak2%3A%20v2%20%7D%3B%0A%2F%2F%20good%0Aconst%20a%20%3D%20%7B%20k1%3A%20v1%2C%20k2%3A%20v2%20%7D%3B%0Aconst%20b%20%3D%20%7B%0Ak1%3A%20v1%2C%0Ak2%3A%20v2%2C%20%7D%3B%0A%60%60%60%0A%0A%E5%8F%A6%E5%A4%96%EF%BC%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95%EF%BC%8C%E5%B0%BD%E9%87%8F%E9%87%87%E7%94%A8%E7%AE%80%E6%B4%81%E8%A1%A8%E8%BE%BE%E6%B3%95%EF%BC%8C%E8%BF%99%E6%A0%B7%E6%98%93%E4%BA%8E%E6%8F%8F%E8%BF%B0%E5%92%8C%E4%B9%A6%0A%E5%86%99%E3%80%82%0A%60%60%60js%0Avar%20ref%20%3D%20'some%20value'%3B%0A%2F%2F%20bad%0Aconst%20atom%20%3D%20%7B%0A%20%20ref%3A%20ref%2C%0Avalue%3A%201%2C%0A%20%20addValue%3A%20function%20(value)%20%7B%0A%20%20%20%20return%20atom.value%20%2B%20value%3B%0A%7D%2C%20%7D%3B%0A%2F%2F%20good%0Aconst%20atom%20%3D%20%7B%0A%20%20ref%2C%0Avalue%3A%201%2C%0A%20%20addValue(value)%20%7B%0A%20%20%20%20return%20atom.value%20%2B%20value%3B%0A%7D%2C%20%7D%3B%0A%60%60%60%0A%0A%23%23%23%23%20%E6%95%B0%E7%BB%84%0A%E4%BD%BF%E7%94%A8%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6(...)%E6%8B%B7%E8%B4%9D%E6%95%B0%E7%BB%84%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Aconst%20len%20%3D%20items.length%3B%0Aconst%20itemsCopy%20%3D%20%5B%5D%3B%0Alet%20i%3B%0Afor%20(i%20%3D%200%3B%20i%20%3C%20len%3B%20i%2B%2B)%20%7B%0A%20%20itemsCopy%5Bi%5D%20%3D%20items%5Bi%5D%3B%0A%7D%0A%2F%2F%20good%0Aconst%20itemsCopy%20%3D%20%5B...items%5D%3B%0A%60%60%60%0A%0A%E4%BD%BF%E7%94%A8Array.from%E6%96%B9%E6%B3%95%EF%BC%8C%E5%B0%86%E7%B1%BB%E4%BC%BC%E6%95%B0%E7%BB%84%E7%9A%84%E5%AF%B9%E8%B1%A1%E8%BD%AC%E4%B8%BA%E6%95%B0%E7%BB%84%E3%80%82%0A%60%60%60js%0Aconst%20foo%20%3D%20document.querySelectorAll('.foo')%3B%0Aconst%20nodes%20%3D%20Array.from(foo)%3B%0A%60%60%60%0A%0A%23%23%23%23%20%E5%87%BD%E6%95%B0%0A%E7%AE%80%E5%8D%95%E7%9A%84%E3%80%81%E5%8D%95%E8%A1%8C%E7%9A%84%E3%80%81%E4%B8%8D%E4%BC%9A%E5%A4%8D%E7%94%A8%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%8C%E5%BB%BA%E8%AE%AE%E9%87%87%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E3%80%82%E5%A6%82%E6%9E%9C%E5%87%BD%E6%95%B0%E4%BD%93%E8%BE%83%0A%E4%B8%BA%E5%A4%8D%E6%9D%82%EF%BC%8C%E8%A1%8C%E6%95%B0%E8%BE%83%E5%A4%9A%EF%BC%8C%E8%BF%98%E6%98%AF%E5%BA%94%E8%AF%A5%E9%87%87%E7%94%A8%E4%BC%A0%E7%BB%9F%E7%9A%84%E5%87%BD%E6%95%B0%E5%86%99%E6%B3%95%E3%80%82%0A%0A%E4%B8%8D%E8%A6%81%E5%9C%A8%E5%87%BD%E6%95%B0%E4%BD%93%E5%86%85%E4%BD%BF%E7%94%A8arguments%E5%8F%98%E9%87%8F%EF%BC%8C%E4%BD%BF%E7%94%A8rest%E8%BF%90%E7%AE%97%E7%AC%A6(...)%E4%BB%A3%E6%9B%BF%E3%80%82%E5%9B%A0%E4%B8%BA%20rest%E8%BF%90%E7%AE%97%E7%AC%A6%E6%98%BE%E5%BC%8F%E8%A1%A8%E6%98%8E%E4%BD%A0%E6%83%B3%E8%A6%81%E8%8E%B7%E5%8F%96%E5%8F%82%E6%95%B0%EF%BC%8C%E8%80%8C%E4%B8%94arguments%E6%98%AF%E4%B8%80%E4%B8%AA%E7%B1%BB%E4%BC%BC%E6%95%B0%E7%BB%84%E7%9A%84%E5%AF%B9%20%E8%B1%A1%EF%BC%8C%E8%80%8Crest%E8%BF%90%E7%AE%97%E7%AC%A6%E5%8F%AF%E4%BB%A5%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E7%9C%9F%E6%AD%A3%E7%9A%84%E6%95%B0%E7%BB%84%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Afunction%20concatenateAll()%20%7B%0A%20%20const%20args%20%3D%20Array.prototype.slice.call(arguments)%3B%0A%20%20return%20args.join('')%3B%0A%7D%0A%2F%2F%20good%0Afunction%20concatenateAll(...args)%20%7B%0A%20%20return%20args.join('')%3B%0A%7D%0A%60%60%60%0A%E4%BD%BF%E7%94%A8%E9%BB%98%E8%AE%A4%E5%80%BC%E8%AF%AD%E6%B3%95%E8%AE%BE%E7%BD%AE%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Afunction%20handleThings(opts)%20%7B%0A%20%20opts%20%3D%20opts%20%7C%7C%20%7B%7D%3B%0A%7D%0A%2F%2F%20good%0Afunction%20handleThings(opts%20%3D%20%7B%7D)%20%7B%0A%2F%2F%20...%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%20Map%E7%BB%93%E6%9E%84%0A%E6%B3%A8%E6%84%8F%E5%8C%BA%E5%88%86Object%E5%92%8CMap%EF%BC%8C%E5%8F%AA%E6%9C%89%E6%A8%A1%E6%8B%9F%E7%8E%B0%E5%AE%9E%E4%B8%96%E7%95%8C%E7%9A%84%E5%AE%9E%E4%BD%93%E5%AF%B9%E8%B1%A1%E6%97%B6%EF%BC%8C%E6%89%8D%E4%BD%BF%E7%94%A8%20Object%E3%80%82%E5%A6%82%E6%9E%9C%E5%8F%AA%E6%98%AF%E9%9C%80%E8%A6%81%20key%3A%20value%20%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%EF%BC%8C%E4%BD%BF%E7%94%A8Map%E7%BB%93%E6%9E%84%E3%80%82%E5%9B%A0%E4%B8%BA%20Map%E6%9C%89%E5%86%85%E5%BB%BA%E7%9A%84%E9%81%8D%E5%8E%86%E6%9C%BA%E5%88%B6%E3%80%82%0A%0A%23%23%23%23%20Class%0A%E6%80%BB%E6%98%AF%E7%94%A8Class%EF%BC%8C%E5%8F%96%E4%BB%A3%E9%9C%80%E8%A6%81prototype%E7%9A%84%E6%93%8D%E4%BD%9C%E3%80%82%0A%E4%BD%BF%E7%94%A8%20extends%20%E5%AE%9E%E7%8E%B0%E7%BB%A7%E6%89%BF%EF%BC%8C%E5%9B%A0%E4%B8%BA%E8%BF%99%E6%A0%B7%E6%9B%B4%E7%AE%80%E5%8D%95%EF%BC%8C%E4%B8%8D%E4%BC%9A%E6%9C%89%E7%A0%B4%20%E5%9D%8F%20instanceof%20%E8%BF%90%E7%AE%97%E7%9A%84%E5%8D%B1%E9%99%A9%E3%80%82%0A%0A%23%23%23%23%20%E6%A8%A1%E5%9D%97%0A%E4%BD%BF%E7%94%A8%20import%20%E5%8F%96%E4%BB%A3%20require%20%E3%80%82%0A%E4%BD%BF%E7%94%A8%20export%20%E5%8F%96%E4%BB%A3%20module.exports%20%E3%80%82%0A%E5%A6%82%E6%9E%9C%E6%A8%A1%E5%9D%97%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E8%BE%93%E5%87%BA%E5%80%BC%EF%BC%8C%E5%B0%B1%E4%BD%BF%E7%94%A8%20export%20default%20%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%A8%A1%E5%9D%97%E6%9C%89%E5%A4%9A%E4%B8%AA%20%E8%BE%93%E5%87%BA%E5%80%BC%EF%BC%8C%E5%B0%B1%E4%B8%8D%E4%BD%BF%E7%94%A8%20export%20default%20%EF%BC%8C%20export%20default%20%E4%B8%8E%E6%99%AE%E9%80%9A%0A%E7%9A%84%20export%20%E4%B8%8D%E8%A6%81%E5%90%8C%E6%97%B6%E4%BD%BF%E7%94%A8%E3%80%82%0A%0A%E4%B8%8D%E8%A6%81%E5%9C%A8%E6%A8%A1%E5%9D%97%E8%BE%93%E5%85%A5%E4%B8%AD%E4%BD%BF%E7%94%A8%E9%80%9A%E9%85%8D%E7%AC%A6%E3%80%82%E5%9B%A0%E4%B8%BA%E8%BF%99%E6%A0%B7%E5%8F%AF%E4%BB%A5%E7%A1%AE%E4%BF%9D%E4%BD%A0%E7%9A%84%E6%A8%A1%E5%9D%97%E4%B9%8B%E4%B8%AD%EF%BC%8C%E6%9C%89%E4%B8%80%20%E4%B8%AA%E9%BB%98%E8%AE%A4%E8%BE%93%E5%87%BA(export%20default)%E3%80%82%0A%60%60%60js%0A%2F%2F%20bad%0Aimport%20*%20as%20myObject%20from%20'.%2FimportModule'%3B%0A%2F%2F%20good%0Aimport%20myObject%20from%20'.%2FimportModule'%3B%0A%60%60%60%0A%0A%E5%A6%82%E6%9E%9C%E6%A8%A1%E5%9D%97%E9%BB%98%E8%AE%A4%E8%BE%93%E5%87%BA%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E5%87%BD%E6%95%B0%E5%90%8D%E7%9A%84%E9%A6%96%E5%AD%97%E6%AF%8D%E5%BA%94%E8%AF%A5%E5%B0%8F%E5%86%99%E3%80%82%0A%E5%A6%82%E6%9E%9C%E6%A8%A1%E5%9D%97%E9%BB%98%E8%AE%A4%E8%BE%93%E5%87%BA%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%AF%B9%E8%B1%A1%E5%90%8D%E7%9A%84%E9%A6%96%E5%AD%97%E6%AF%8D%E5%BA%94%E8%AF%A5%E5%A4%A7%E5%86%99%E3%80%82%0A%0A%23%23%23%23%20ESLint%E7%9A%84%E4%BD%BF%E7%94%A8%0A%E9%A6%96%E5%85%88%EF%BC%8C%E5%AE%89%E8%A3%85%20ESLint%0A%60%60%60%0A%24%20npm%20i%20-g%20eslint%0A%60%60%60%0A%E7%84%B6%E5%90%8E%EF%BC%8C%E5%AE%89%E8%A3%85%20Airbnb%20%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99%EF%BC%8C%E4%BB%A5%E5%8F%8A%20import%E3%80%81a11y%E3%80%81react%20%E6%8F%92%E4%BB%B6%E3%80%82%0A%60%60%60%0A%24%20npm%20i%20-g%20eslint-config-airbnb%0A%24%20npm%20i%20-g%20eslint-plugin-import%20eslint-plugin-jsx-a11y%0Aeslint-plugin-react%0A%60%60%60%0A%E6%9C%80%E5%90%8E%EF%BC%8C%E5%9C%A8%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA%20.eslintrc%20%E6%96%87%E4%BB%B6%EF%BC%8C%E9%85%8D%E7%BD%AEESLint%0A%60%60%60%0A%7B%0A%20%20%22extends%22%3A%20%22eslint-config-airbnb%22%0A%7D%0A%60%60%60</center></body></html>